<template>
    <ul>
        <li :style="{opacity}">欢迎学习vue</li>
        <li>news001
            <input type="text">
        </li>
        <li>news002
            <input type="text">
        </li>
        <li>news003
            <input type="text">
        </li>
    </ul>
</template>

<script>
export default {
    name:"News",
    data(){
        return{
            a:false,
            opacity:1,
        }
    },
    //router独有的钩子
    activated(){
        console.log("news组件被激活了");
        this.timer = setInterval(() => {
            this.opacity -= 0.01;
            if(this.opacity <= 0){
                this.opacity = 1;
            }
        }, 16);
    },
    deactivated(){
        console.log("news组件即将失活");
        clearInterval(this.timer);
    },
    /* beforeDestroy(){
        console.log("news组件即将被销毁");
        clearInterval(this.timer);
    },
    mounted(){
        this.timer = setInterval(() => {
            this.opacity -= 0.01;
            if(this.opacity <= 0){
                this.opacity = 1;
            }
        }, 16);
    } */
}
</script>

<style>

</style>